<template>
    <div class="goodsthree">
        <el-card>
            <!-- 输入框 搜索 -->
            <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="page.query" style="width:300px"  class="input-with-select">
         <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
     </el-input>
     <el-button type="primary" @click="add" >添加商品</el-button>
     <!-- 表格 -->
             <el-table
             :data="tableData"
             border
             style="width: 100%">
            <el-table-column
            type="index"
            width="55px"
              label="#">
            </el-table-column>
            <el-table-column
              prop="goods_name"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="goods_price"
              label="价格（元）">
            </el-table-column>
            <el-table-column
              prop="goods_weight"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="upd_time"
              label="创建时间">
              <template slot-scope="scope">
                <div>
                    {{ new Date(scope.row.upd_time *1000).toLocaleString() }}
                </div>
              </template>
            </el-table-column>
            <!-- 操作 -->
             <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"></el-button>
      </template>
    </el-table-column>
          </el-table>
         </div>
        </el-card>
        <!-- 分页 -->
         <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pagenum"
      :page-sizes="[3, 10, 15, 20]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
</template>
<script>

import {goodsList,deleteGoods} from "@/utils/goods"
export default {
    data() {
        return {
          total:0,
            tableData:[],
            page:{
                query:'',
                pagenum:1,
                pagesize:10
            }
        }
    },
    methods: {
        // 添加
        add(){
            this.$router.push('/add');
        },
        // 编辑
        handleEdit(){},
        // 删除
        handleDelete(row){
          console.log(row);
            
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
            }).then(() => {
          deleteGoods(row.goods_id).then(res=>{
            console.log(res);
            if(res.data.meta.status==200){
              this.$message({
               type: 'success',
               message: res.data.meta.msg
              });
              this.getgoodslists()
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });     
        },
        // 分页  方法
         handleSizeChange(val) {
          this.page.pagesize=val
          this.getgoodslists()
        console.log(`每页 ${val} 条`);
        },
         handleCurrentChange(val) {
          this.page.pagenum=val
          this.getgoodslists()
          console.log(`当前页: ${val}`);
        },

        // 查询
        search(){
          // this.getgoodslists()
          console.log(this.page.query);
        },
    
      // 封装数据
      getgoodslists() {
          goodsList(this.page).then(res=>{
        // console.log(res);
        this.tableData=res.data.data.goods
        this.total=res.data.data.total
      })
      }
    },
    created() {
      this.getgoodslists()

    }
}
</script>
